<script>
    function idToHref(id) {
        switch (id) {
            case "ms-checked":
            case "ms-disabled":
            case "ms-enabled":
            case "ms-selected":
            case "ms-readonly":
                return "ms-attr"
            case "ms-href":
            case "ms-src":
            case "ms-alt":
            case "ms-title":
            case "ms-value":
                return "string-bindings"
            case "ms-class":
            case "ms-hover":
            case "ms-active":
                return "ms-class"

        }

        return id
    }
    var apisVM = avalon.define("apis", function(vm) {
        vm.bindings = ("ms-alt,ms-attr,ms-checked,ms-class,ms-css,ms-data,ms-disabled,ms-duplex,ms-href,ms-html,ms-if,ms-include,ms-on," +
                "ms-readonly,ms-repeat,ms-selected,ms-src,ms-text,ms-title,ms-value,ms-visible,ms-widget").match(avalon.rword).sort();
        vm.statics = {
            "mix(a,b)": "★★★相当于jQuery.extend, 或用于深浅拷贝属性",
            "log(s)": "打印日志,如avalon.log(a); avalon.log(a, b)",
            "isFunction(s)": "判定是否为函数,1.3.6新增",
            "error(s)": "抛出异常",
            "ui": "用于放置组件",
            "vmodels": "★★★用于放置avalon.define(id, fn)产生的ViewModel",
            "noop": "一个空函数",
            "ready(fn)": "★★★domReady，将回调延迟到DOM树后才执行",
            "oneObject(str | array, val?)": "★★★如果传入一个字符串则将它以逗号转换为一个字符串数组，否则一定要传字符串数组，第二个参数可选，为生成的对象的值。此方法是用于生成一个键名不一样，但键值都一样的对象。如{a:1, b:1, c:1, d:1}",
            "type(obj)": "★★★返回传参的数据类型，值可能为array, date, object, json, number, string, null, undefined",
            "isWindow(obj)": "判定是否为window对象",
            "isPlainObject(obj)": "判定是否是一个朴素的javascript对象（Object），不是DOM对象，不是BOM对象，不是自定义类的实例",
            "slice(obj, start?, end?)": "用于转换一个类数组对象为一个纯数组，后面两个为索引值，可以只取原对象的一部分元素",
            "range(start, end, step)": "生成一个整数数组，功能与underscorejs或python的同名函数一致",
            "bind(el, type, fn, phase)": "绑定事件，返回一个回调给你自行卸载",
            "unbind(el, type, fn, phase)": "卸载事件",
            "each(obj,fn)": "★★★功能同jQuery.each， 都是索引值或键名在前，值或元素在后",
            "avalon.define(id, factory)": "★★★定义一个ViewModel",
            "scan(el?, vmodels?, group ?)": "★★★扫描DOM树，抽取绑定(el默认为DOM,vmodels默认为空数组",
         
            "define(id?, deps?, factory)": "●一个全局方法，用于定义AMD规范的JS模块",
            "require(deps, callback)": "●一个全局方法，用于加载JS模块",
            "css(node, name, value?)": "如果只有两个参数，读取元素的某个样式，三个参数时，设置元素某个样式;<br/>" +
                    "在设置样式时,如果是长宽等计量属性,你可以直接传一个数值,框架会自动帮你添加px单位;<br/>" +
                    "如果是取值时,你的第三个参数是true,它会帮你去掉单位,转换为纯数值",
            "nextTick(fn)": "延迟执行某个函数，类似于setTimeout(fn, 0)",
            "contains(a, b)": "判定A元素包含B元素",
            "parseHTML(str)": "将一段字符串转换为文档碎片",
            "innerHTML(node, str)": "对节点node进行innerHTML操作，在旧式IE下，head, table, td, tr, th等元素的innerHTML是只读，这个方法进行了兼容处理",
            "clearHTML(node)": "清空元素的所有子节点",
            "Array.remove(array, el)": "移除某个元素，成功返回true，失败返回false",
            "Array.removeAt(array, index)": "移除某个位置上的元素，成功返回true，失败返回false",
            "Array.ensure(array, el)": "只有数组不存在此元素时才添加它",
            "avalon.filters.uppercase(str)": "全部大写",
            "avalon.filters.lowercase(str)": "全部小写",
            "avalon.filters.truncate(str, length, truncation)": "length，新字符串长度，truncation，新字符串的结尾的字段",
            "avalon.filters.camelize(str)": "驼峰化",
            "avalon.filters.escape(str)": "将字符串经过 html 转义得到适合在页面中显示的内容, 例如替换 &lt; 为 &amplt;",
            "avalon.filters.currency(str,symbol)": "货币处理，默认第2个参数为￥",
            "avalon.filters.number(str, decimals, dec_point, thousands_sep)": "数字格式化<br/>" +
                    "str 必需 要格式化的数字<br/>" +
                    "decimals	可选，规定多少个小数位<br/>" +
                    "dec_point	可选，规定用作小数点的字符串（默认为 . ）<br/>" +
                    "thousands_sep 可选，规定用作千位分隔符的字符串（默认为','）。如果设置了该参数，那么所有其他参数都是必需的"

        }
        vm.prototypes = {
            bind: "绑定事件"
        }
        vm.callbacks = ["data-callback"]
        vm.staticMethod = ["static-method"]
        vm.prototypeMethod = ["prototype-method"]
        vm.formExamples = ["form-examples"]
        vm.supportSVG = !!window.SVGElement
        vm.concepts = [
            {
                name: "非监控属性",
                id: "unobservable"
            },
            {
                name: "监控属性",
                id: "observable"
            },
            {
                name: "监控数组",
                id: "collection"
            },
            {
                name: "计算属性",
                id: "computed"
            },
            {
                name: "$watch方法",
                id: "$watch"
            },
            {
                name: "$fire方法",
                id: "$fire"
            },
            {
                name: "视图模型",
                id: "vmodel"
            },
            {
                name: "数据模型",
                id: "$model"
            }]
        vm.bindingIncludes = []
        vm.scrollToView = function(id) {
            id = idToHref(id)
            var el = document.getElementById(id)
            if (el) {
                var top = avalon(el).offset().top - 70
                avalon(window.parent).scrollTop(top)
            }
        }
        vm.highlight = function() {
            SyntaxHighlighter.highlight()
        }
    })
    var uniq = {}
    apisVM.bindings.forEach(function(ID) {
        var newID = idToHref(ID)
        if (!uniq[newID]) {
            apisVM.bindingIncludes.push(newID)
            uniq[newID] = 1
        }
    })
</script>
<style>
    .apis-table{
        border-collapse: collapse;
    }
    .apis-list {

        background:rgb(221,221,204);
        font-size: 14px;
        line-height: 1.5;
    }
    .apis-details{
        padding:0 1em;
        background:rgb(238,238,221);
        font: 13px/1.5 "OpenSansRegular", "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
    .apis-details p{
        text-indent: 2em;
    }
    .vnac {
        list-style: none;
        width:130px;
        display:block;
        margin:0px;
        padding:0px;
    }
    .vnac li{
        margin:0px;
        padding:0px;
        line-height: 1.5;
        display: block;
    }
    .vnac li .title{
        line-height: 1.5;
        font-weight: 700;
        color:#28966f;
    }
    .vnac ul.child-nav{
        display:block;
        list-style: none;
        margin:5px 0px 5px 10px;;
        padding:0px;
    }
    .vnac ul.child-nav li{
        text-indent: 1em;
        cursor: pointer;
    }
    .vnac ul.child-nav li:hover{
        color:#fff;
        background-color:#28966f;
    }
</style>

<table class="apis-table" ms-controller="apis">
    <tr>
        <td class="apis-list" valign="top">
            <ul class="vnac">
                <li>
                    <div class="title">核心概念</div>
                    <ul class="child-nav">
                        <li ms-repeat="concepts" ms-click="scrollToView('c-'+el.id)">{{el.name}}</li>
                    </ul>
                </li>
                <li>
                    <div class="title">各种绑定</div>
                    <ul class="child-nav">
                        <li ms-repeat="bindings" ms-click="scrollToView(el)">{{el}}</li>
                    </ul>
                </li>

                <li>
                    <div class="title">各种回调</div>
                    <ul class="child-nav">
                        <li ms-repeat="callbacks" ms-click="scrollToView(el)">{{el}}</li>
                    </ul>
                </li>
                <li>
                    <div class="title">静态方法</div>
                    <ul class="child-nav">
                        <li ms-repeat="staticMethod" ms-click="scrollToView(el)">静态方法</li>
                    </ul>
                </li>
                <li>
                    <div class="title">原型方法</div>
                    <ul class="child-nav">
                        <li ms-repeat="prototypeMethod" ms-click="scrollToView(el)">原型方法</li>
                    </ul>
                </li>
                <li>
                    <div class="title">表单示例</div>
                    <ul class="child-nav">
                        <li ms-repeat="formExamples" ms-click="scrollToView(el)">表单示例</li>
                    </ul>
                </li>
            </ul>
        </td>
        <td class="apis-details">
            <div ms-repeat="concepts" ms-include-src="pages/apis/concepts/{{el.id}}.html"  data-include-rendered="highlight">

            </div>
            <div>
                <h3 style='color:green'> avalon的指令分为三大类</h3>
                <ul style='list-style:circle inside'>
                    <li>以ms-*开头的绑定属性</li>
                    <li ms-skip>位于文本节点或位于ms-attr-*, ms-href, ms-src, ms-value, ms-title,
                        ms-alt中的{{}}插值表达式
                        (其中ms-value, ms-title, ms-alt已经在1.3.6已经废弃)</li>
                    <li>以data-xxx-*开头的辅助指令(如data-duplex-changed, data-duplex-focus,
                        data-duplex-event, data-repeat-rendered,data-include-loaded....)</li>
                </ul>
            </div>
            <div ms-if="supportSVG"　ms-include-src="'pages/apis/bindings/bindings.svg'">   
            </div>
            <div ms-if="!supportSVG">   
                <img src="pages/apis/bindings/bindings.png"/>
            </div>

            <div ms-repeat="bindingIncludes" ms-include-src="pages/apis/bindings/{{el}}.html"  data-include-rendered="highlight">

            </div>

            <div ms-repeat="callbacks" ms-include-src="pages/apis/callbacks/{{el}}.html"  data-include-rendered="highlight">

            </div>
            <div ms-include-src="'pages/apis/statics/statics.html'"  data-include-rendered="highlight">

            </div>
            <div ms-include-src="'pages/apis/prototypes/prototypes.html'"  data-include-rendered="highlight">

            </div>
            <div ms-include-src="'pages/apis/form/index.html'"  data-include-rendered="highlight">
            </div>
        </td>
    </tr>
</table>

